<template>
  <immerse-bar ref="immerseSearchBar" class="search-wrapper">
    <i class="search-back iconfont icon-scan" />
    <span class="search-input-wrapper">
      <i class="search-icon iconfont icon-search" />
      <input class="search-input" placeholder="搜索" />
    </span>
    <i class="search-message iconfont icon-message" />
  </immerse-bar>
</template>

<script type="text/ecmascript-6">
import ImmerseBar from 'strongflour/src/components/ImmerseBar'

export default {
  name: 'SearchBar',
  data () {
    return {
    }
  },
  methods: {
    onScroll: function (event) {
      this.$refs.immerseSearchBar.onScroll(event)
    }
  },
  components: {
    ImmerseBar
  }
}
</script>

<style lang="stylus" scoped>
.search-wrapper
  position:fixed
  width: 100%
  height: px2rem(100)
  display: flex
  justify-content :space-between
  font-size: px2rem(50)
  z-index :9999
  .search-back
    align-self: center
    margin:px2rem(20)
  .search-input-wrapper
    flex:1
    display:flex
    bordor-radius: px2rem(20)
    .search-icon
      align-self:center
    .search-input
      flex:1
      background-color:transparent
      border:0
      font-size :px2rem(30)
      &:focus
        outline:none
      &::-webkit-input-placeholder
        color: $color-light-grey-s
  .search-message
    align-self:center
    margin:px2rem(20)
</style>
